<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="隐患类型" prop="resource">
          <el-input v-model="ruleForm.hiddenType"></el-input>
        </el-form-item>
        <el-form-item label="充电桩型号" prop="name">
          <el-input v-model="ruleForm.chargingpileType"></el-input>
        </el-form-item>
        <el-form-item label="登记时间" prop="name">
          <el-input v-model="ruleForm.regTime"></el-input>
        </el-form-item>
        <el-form-item label="区域联络人" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="优先级" prop="region">
          <el-select v-model="ruleForm.rank" placeholder="请选择优先级">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充电站点" prop="name">
          <el-input v-model="ruleForm.addressSite"></el-input>
        </el-form-item>
        <el-form-item label="充电桩编号" prop="name">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="详细地点" prop="name">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联络电话" prop="name">
          <el-input v-model="ruleForm.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="name">
          <el-input v-model="ruleForm.status"></el-input>
        </el-form-item>
        <el-form-item label="隐患内容" prop="name">
          <el-input v-model="ruleForm.content"></el-input>
        </el-form-item>
        <el-form-item label="资料附件" prop="name">
          <el-input v-model="ruleForm.hiddenImg"></el-input>
        </el-form-item>
        <el-form-item label="处理人" prop="name">
          <el-input v-model="ruleForm.personName"></el-input>
        </el-form-item>
        <el-form-item label="预计完成时间" prop="name">
          <el-input v-model="ruleForm.estimate"></el-input>
        </el-form-item>
        <el-form-item label="任务内容" prop="name">
          <el-input v-model="ruleForm.assContent"></el-input>
        </el-form-item>
        <hr />
        <el-form-item label="办理说明" prop="name">
          <el-input v-model="ruleForm.explain"></el-input>
        </el-form-item>
        <el-form-item label="现场图片" prop="name">
          <el-input v-model="ruleForm.hiddenImg"></el-input>
        </el-form-item>
        <el-form-item label="其他附件" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            立即创建
          </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    editData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {
        name: '',
        hiddenType: '',
        chargingpileType: '',
        regTime: '',
        name: '',
        rank: '',
        addressSite: '',
        number: '',
        address: '',
        contactsPhone: '',
        status: '',
        content: '',
        hiddenImg: '',
        personName: '',
        estimate: '',
        assContent: '',
        explain: '',
        hiddenImg: '',
      },
      rules: {
        //   name: [
        //     { required: true, message: '请输入活动名称', trigger: 'blur' },
        //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //   ]
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleClose() {
        let dialogVisible = false
        // this.ruleForm = {}
      this.$emit('change',dialogVisible)
    },
  },
  watch: {
    editData(newval) {
      this.ruleForm = newval
    },
  },
}
</script>